<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      title="求购详情"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="needs-item">
      <NeedsUser
        :needsAddress="needsData.needsAddress"
        :nowaddTime="needsData.nowaddTime"
        :cateId="needsData.cateId"
        :userId="needsData.userId"
      ></NeedsUser>
      <div class="needs-item_bottom dislay-flex">
        <div class="needs_price flex">
          <span class="left">预期</span><span class="icon">￥</span
          ><span class="right">{{ needsData.needsPrice }}</span>
        </div>
      </div>
      <div class="needs-item_content">
        <div class="needs-item_content_msg">{{ needsData.needsContent }}</div>
      </div>
    </div>
    <!-- 发布人信息 -->
    <section class="goodsinfo-item">
      <div class="info-item-ly">
        <div class="ly-content">
          <p>联系人：{{ needsData.needsXm }}</p>
          <p class="import tc-template__color">
            联系时请告知在汤臣亿品上面看到的
          </p>
        </div>
        <div class="ly-right2">
          <!-- 微信 -->
          <a
            :data-clipboard-text="needsData.needsWx"
            class="id-show__wx"
            href="javascript:void(0);"
            @click="weixinClick"
          ></a>
        </div>
        <div class="ly-right">
          <a
            :data-clipboard-text="needsData.needsQq"
            href="javascript:void(0);"
            class="id-show__qq"
            @click="qqClick"
          ></a>
        </div>
      </div>
    </section>
    <!-- 举报 -->
    <section class="goodsinfo-item">
      <div class="info-item-ly">
        <div class="jubao-content flex">
          <p class="title tc-template__color">
            如遇无效、虚假、诈骗信息，请立即举报
          </p>
          <p class="desc">为了您的资金安全，请在平台交易，请勿私下转账</p>
        </div>
        <a href="javascript:;" @click="jubaoClick">
          <div class="jubao-right">
            <div class="ico">
              <img src="./img/jubao_ico.png" width="30" height="28" />
            </div>
            <div class="btn">举报</div>
          </div>
        </a>
      </div>
    </section>
    <van-goods-action>
      <van-goods-action-icon icon="home-o" text="首页" to="/" />
      <van-goods-action-icon icon="chat-o" text="客服" @click="jubaoClick" />
      <van-goods-action-button
        type="danger"
        text="立即联系"
        @click="onClickButton"
      />
    </van-goods-action>
    <!-- 客服弹出面板 -->

    <van-dialog v-model="show" title="联系客服" show-cancel-button>
      <div class="tanchu">
        <div class="ly-right2">
          <!-- 微信 -->
          <a href="javascript:void(0);"></a>
          <button
            @click="weixinClick"
            class="weixinKefu id-show__wx"
            data-clipboard-text="lxx_bbs"
          >
            复制微信号
          </button>
        </div>
        <div class="ly-right">
          <a href="javascript:void(0);" @click="onClickKefu"></a>
          <button
            @click="qqClick"
            class="QQaKefu id-show__qq"
            data-clipboard-text="418005852"
          >
            复制QQ号
          </button>
        </div>
      </div>
      <van-divider>点击QQ图标直接跳转</van-divider>
    </van-dialog>
    <!-- 咨询弹窗 -->
    <van-dialog v-model="zixunDao" title="咨询用户" show-cancel-button>
      <div class="zixunt clearfix">
        <div class="ly-right2">
          <!-- 微信 -->
          <a
            :data-clipboard-text="needsData.needsWx"
            class="id-show__wx"
            href="javascript:void(0);"
            @click="weixinClick"
          ></a>
        </div>
        <div class="ly-right">
          <a
            :data-clipboard-text="needsData.needsQq"
            href="javascript:void(0);"
            class="id-show__qq"
            @click="qqClick"
          ></a>
        </div>
      </div>
      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        点击图标复制
      </van-divider>
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from "vant";
import Clipboard from "clipboard";
import NeedsUser from "/src/components/needsUser";

Vue.use(Toast);
import Vue from "vue";
export default {
  name: "ToutiaoNeeditem",

  components: { NeedsUser },

  directives: {},

  data() {
    return {
      needsData: [],
      username: "",
      userQurl: "",
      show: false,
      zixunDao: false,
    };
  },

  mounted() {},
  created() {
    this.needsData = this.$route.query.data;
  },
  methods: {
    // 点击微信图标
    weixinClick() {
      var clipboard = new Clipboard(".id-show__wx");
      clipboard.on("success", (e) => {
        Toast.success("复制微信号成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Toast.fail("复制微信号错误");
        // 释放内存
        clipboard.destroy();
      });
    },
    qqClick() {
      var clipboard = new Clipboard(".id-show__qq");
      clipboard.on("success", (e) => {
        Toast.success("复制QQ号成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Toast.fail("复制QQ号错误");
        // 释放内存
        clipboard.destroy();
      });
    },
    jubaoClick() {
      this.show = true;
    },
    // 客服
    onClickKefu() {
      var qq = 418005852;

      var u = navigator.userAgent;

      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

      if (isiOS) {
        if (u.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
          window.open(
            "http://wpa.qq.com/msgrd?v=3&uin=" + qq + "&site=qq&menu=yes"
          );
        } else {
          window.open(
            "mqqwpa://im/chat?chat_type=wpa&uin=" +
              qq +
              "&version=1&src_type=web&web_src=cmgytt.top"
          );
        }
      } else {
        if (u.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
          window.open(
            "http://wpa.qq.com/msgrd?v=3&uin=" + qq + "&site=qq&menu=yes"
          );
        } else {
          window.open(
            "mqqwpa://im/chat?chat_type=wpa&uin=" +
              qq +
              "&version=1&src_type=web&web_src=cmgytt.top"
          );
        }
      }
    },
    onClickButton() {
      this.zixunDao = true;
    },
  },
};
</script>

<style lang="less" scoped>
.needs-item {
  background: #fff;
  padding: 15px;
  border-bottom: 1px solid #f1f1f1;
  font-size: 13px;
}
.dislay-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.needs-item .needs-item_bottom {
  padding-top: 20px;
  color: #7b7b7b;
  font-size: 13.5px;
}
.needs-item_top_right {
  flex: 1;
  padding-left: 10px;
}

.needs-item_top_left img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}
.needs-item_top_right .needs-xm {
  padding: 3px 0 8px 0;
  font-weight: 600;
  font-size: 15px;
  color: black;
}
.needs-item_top_right .needs-address {
  color: #959595;
  font-size: 12px;
}
.needs-item_top_right .needs-address .needs-area {
  padding-right: 8px;
  font-size: 13.5px;
  border-right: 1px solid #9a9a9a;
}
.needs-item_top_right .needs-address .needs-time.area {
  padding-left: 8px;
  line-height: 16px;
}
.clearfix:after {
  content: " ";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
.needs-item .needs-item_top .needs-item_top_cate .needs-cate {
  color: #53d869;
  font-size: 14px;
}
.needs-item .needs-item_content_msg {
  color: #323232;
  padding-top: 10px;
  line-height: 20px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 66px;
}
.flex {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.flex * {
  box-sizing: border-box;
}
.needs_price span.left {
  font-size: 14px;
}
.needs_price span.icon {
  padding-left: 5px;
  font-size: 12px;
  color: #fa0505;
}
.needs_price span.right {
  color: #fa0505;
  font-size: 24px;
  margin-left: 3px;
}
.needs_contact span {
  padding: 3px 10px;
  border: 1px solid #bdbdbd;
  color: #666;
  border-radius: 6px;
  font-size: 14px;
}
.goodsinfo-item {
  background: #fff;
  font-size: 15px;
  margin: 8px 0;
}
.tc-template__color {
  color: #03b2ee !important;
}
.goodsinfo-item .info-item-ly {
  padding: 5px 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.goodsinfo-item .info-item-ly .ly-content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.info-item-ly .ly-content p {
  height: 25px;
  line-height: 25px;
  overflow: hidden;
}
.info-item-ly .ly-content p {
  height: 25px;
  line-height: 25px;
  overflow: hidden;
}
.info-item-ly .ly-right2 {
  float: right;
  width: 40px;
  height: 50px;
}
.info-item-ly .ly-right2 a {
  display: block;
  height: 50px;
  background: url("./img/icon_weichat.png") no-repeat center;
  background-size: 30px auto;
}
.info-item-ly .ly-right {
  float: right;
  width: 40px;
  height: 50px;
}
.info-item-ly .ly-right a {
  display: block;
  height: 50px;
  background: url("./img/icon_QQ.png") no-repeat center;
  background-size: 30px auto;
}
.info-item-ly .jubao-right {
  margin-left: 10px;
  width: 40px;
  height: 48px;
}
.info-item-ly .jubao-right .ico {
  width: 30px;
  height: 28px;
  margin-left: 5px;
}
.info-item-ly .jubao-right .btn {
  width: 40px;
  height: 20px;
  line-height: 20px;
  font-size: 0.8em;
  text-align: center;
  color: #57b6e7;
}
.info-item-ly .jubao-content .title {
  color: #ff7f00;
  height: 25px;
  line-height: 25px;
  overflow: hidden;
}
.jubao-content .desc {
  font-size: 0.8em;
  color: #989694;
  min-height: 20px;
  line-height: 16px;
}
.tanchu .ly-right2 {
  padding-left: 20px;
  width: 40px;
  height: 50px;
}
.tanchu .ly-right2 a {
  display: inline-block;
  width: 40px;
  height: 50px;
  background: url("./img/icon_weichat.png") no-repeat center;
  background-size: 40px auto;
}
.tanchu .ly-right {
  padding-left: 20px;
  width: 40px;
  height: 50px;
}
.tanchu .ly-right a {
  display: inline-block;
  width: 40px;
  height: 50px;
  background: url("./img/icon_QQ.png") no-repeat center;
  background-size: 40px auto;
}
.weixinKefu {
  display: inline-block;
  width: 2.29333rem;
  padding: 0.10667rem;
  border-radius: 0.26667rem;
  position: absolute;
  right: 3.36rem;
  top: 1.57333rem;
  font-size: 0.37333rem;
  color: #fff;
  background-color: #1296db;
}
.QQaKefu {
  display: inline-block;
  width: 2.29333rem;
  padding: 0.10667rem;
  border-radius: 0.26667rem;
  position: absolute;
  right: 3.36rem;
  top: 2.93333rem;
  font-size: 0.37333rem;
  color: #fff;
  background-color: #1296db;
}
.zixunt {
  margin: 10px 0px;
}
.zixunt .ly-right2 {
  margin-left: 100px;

  float: left;
  width: 40px;
  height: 50px;
}
.zixunt .ly-right2 a {
  display: block;
  height: 50px;
  background: url("./img/icon_weichat.png") no-repeat center;
  background-size: 40px auto;
}
.zixunt .ly-right {
  margin-right: 100px;

  float: right;
  width: 40px;
  height: 50px;
}
.zixunt .ly-right a {
  display: block;
  height: 50px;
  background: url("./img/icon_QQ.png") no-repeat center;
  background-size: 40px auto;
}
</style>